<template>
	<view style="padding-bottom: 120rpx;">
		
		<view class="card" v-if="type==0">
			<view class="input-item" style="margin-bottom: 40rpx;">
				<view class="card-tit flex align"><text></text>图片名称</view>
				<input placeholder="请输入图片名称" v-model="name" style="font-size: 32rpx;"/>
			</view>
			<view class="card-tit flex align"><text></text>上传图片</view>
			<view class="loadUp" @click="toUpload()" v-if="urls==''">
				<uni-icons type="image" color="#7D7D7D" size="40"></uni-icons>
			</view>
			<view class="logo" @click="toUpload()" v-else>
				<image :src="urls" mode="widthFix"></image>
			</view>

		</view>
		<view class="card" v-if="type==1">
			<view class="input-item" style="margin-bottom: 40rpx;">
				<view class="card-tit flex align"><text></text>视频名称</view>
				<input placeholder="请输入视频名称" v-model="name" style="font-size: 32rpx;"/>
			</view>
			<view class="card-tit flex align"><text></text>上传视频</view>
			<view class="loadUp" @click="toUpload2()">
				<uni-icons type="videocam-filled" color="#7D7D7D" size="40"></uni-icons>
				<view class="btnsUp" style="font-size: 30rpx;">{{urls==''?'上传视频':'重新上传'}}</view>
			</view>
			<view v-if="urls!=''" class="logo" style="margin-top: 30rpx;">
				<video :src="urls"></video>
			</view>

		</view>
		<view class="main-btn" @click="toUpC()">确定添加</view>
	</view>
</template>

<script>
	import {
		uploadOss
	} from '@/utils/oss/oss.js'
	import {
		materialAdd
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				image: '',
				video: '',
				type: 0,
				id:'',
				urls:'',
				name:''
			};
		},
		onLoad(option) {
			this.type = option.type
			this.id = option.id
		},
		methods: {
			toUpload() {
				let that = this
				uni.showLoading({
					title: "loading",
					mask: true
				})
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async (res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let ossPath = await uploadOss({
							filePathFore: 'img/',
							filePath: res.tempFilePaths[0],
						})
						that.urls = 'https://jgdrxt.oss-cn-shanghai.aliyuncs.com/' + ossPath
					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			toUpload2() {
				let that = this
				uni.showLoading({
					title: "loading",
					mask: true
				})
				uni.chooseVideo({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async (res) => {
						console.log(res)
						// OSS上传(得到在oss文件夹下照片路径)
						let ossPath = await uploadOss({
							filePathFore: 'video/',
							filePath: res.tempFilePath,
						})
						that.urls = 'https://jgdrxt.oss-cn-shanghai.aliyuncs.com/' + ossPath
					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			toUpC(){
				let that = this
				if(this.name==''){
					uni.showToast({
						title:'请输入名称',
						icon:'error'
					})
					return false
				}
				if(this.urls==''){
					uni.showToast({
						title:'请上传',
						icon:'error'
					})
					return false
				}
				uni.showModal({
					title: "提示",
					content: "确定要上传吗？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							that.toComf()
						} else {
						
						}
					}
				
				})
			},
			async toComf(){
				const result = await materialAdd({group_id:this.id,type:Number(this.type)+1,url:this.urls,name:this.name})
				if(result.code==1){
					uni.showToast({
						title:result.msg
					})
					setTimeout(()=>{
						uni.navigateBack()
					},500);
				}else{
					uni.showToast({
						title:result.msg,
						icon:'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		border-radius: 12rpx;
		box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
		padding: 30rpx 24rpx;
		background: white;
		margin-bottom: 30rpx;

		.loadUp {
			background: #D9D9D9;
			border-radius: 12rpx;
			width: fit-content;
			padding: 68rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.logo {
			image {
				width: 100%;
				height: 150rpx;
			}

			video {
				width: 100%;
				height: 450rpx;
				object-fit: contain;
			}
		}

		.card-tit {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;

			text {
				background: #FF6543;
				display: block;
				width: 5rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.input-item {
			padding: 19rpx 0;
			border-bottom: solid 1rpx #D9D9D9;
			font-size: 28rpx;

			view {
				width: 30%;
			}
		}
	}
	.main-btn {
		font-size: 34rpx;
		font-weight: bold;
		color: white;
		text-align: center;
		background: #FF6543;
		line-height: 108rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>